<template>
  <div>
    <div class="pay_box">
      <el-form inline>
        <el-form-item label="患者姓名">
          <PatientSearch v-model="form.patientId" clearable placeholder="患者姓名" />
        </el-form-item>
        <el-form-item label="接诊科室">
          <deptSearch v-model="form.department" />
        </el-form-item>
        <el-form-item label="接诊医生">
          <doctorSearch v-model="form.doctor" />
        </el-form-item>
        <el-form-item label="接诊日期">
          <el-date-picker style="width: 48%" v-model="form.seeTimeStart" type="date" clearable value-format="yyyy-MM-dd" placeholder="开始日期" />
          -
          <el-date-picker style="width: 48%" v-model="form.seeTimeEnd" type="date" clearable value-format="yyyy-MM-dd" placeholder="结束日期" />
        </el-form-item>
        <el-form-item label="退药日期">
          <el-date-picker style="width: 48%" v-model="form.withdrawalStart" type="date" clearable value-format="yyyy-MM-dd" placeholder="开始日期" />
          -
          <el-date-picker style="width: 48%" v-model="form.withdrawalEnd" type="date" clearable value-format="yyyy-MM-dd" placeholder="结束日期" />
        </el-form-item>
        <el-form-item label="退药操作员">
          <el-input class="pay_date" v-model="form.userName" clearable placeholder="退药操作员" />
        </el-form-item>
        <el-form-item label="药品信息">
          <el-input class="pay_date" v-model="form.drugName" clearable placeholder="药品信息" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(null)"></el-button>
          <!-- <el-button type="primary" style="float:right;" @click="exportExcel()">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="pay_box">
      <table class="table-box">
        <thead>
          <tr>
            <th>退药ID</th>
            <th>收费清单ID</th>
            <th>患者名</th>
            <th>接诊科室</th>
            <th>接诊医生</th>
            <th>接诊时间</th>
            <th>下单时间</th>
            <th>退药操作员</th>
            <th>退药时间</th>
            <th>药品名称</th>
            <th>退药数量</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tabList" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.curePrescriptionDrugId }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.deptName }}</td>
            <td>{{ item.doctor }}</td>
            <td>{{ item.seeTime }}</td>
            <td>{{ item.orderTime }}</td>
            <td>{{ item.withdrawalUserName }}</td>
            <td>{{ item.gmtCreate }}</td>
            <td>{{ item.drugName }}</td>
            <td>{{ item.num }}{{ item.unit | changeAssist(medicineUnitList) }}</td>
          </tr>
        </tbody>
      </table>
      <br />
      <pager v-model="pager" @change-pagenum="getChartTable"></pager>
    </div>
  </div>
</template>
<script>
import PatientSearch from "@/pages/_com/patientSearch";
import deptSearch from "@/pages/_com/deptSearch";
import doctorSearch from "@/pages/_com/doctorSearch";
export default {
  components: {
    PatientSearch,
    deptSearch,
    doctorSearch,
  },
  data() {
    return {
      medicineUnitList: [],
      form: {
        //患者id
        patientId: void 0,
        // 科室ID
        department: void 0,
        // 医生ID
        doctor: void 0,
        // 看诊开始时间
        seeTimeStart: void 0,
        // 看诊结束时间
        seeTimeEnd: void 0,
        // 退药结束时间/退费
        withdrawalEnd: void 0,
        // 退药开始时间/退费
        withdrawalStart: void 0,
        // 药品名称
        drugName: void 0,
        // 操作人
        userName: void 0,
      },
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tabList: [],
    };
  },
  mounted() {
    this.getCommonConfigByKey("药品剂量单位").then((res) => {
      this.medicineUnitList = res;
    });
    this.getChartTable(null);
  },
  methods: {
    getChartTable(arg) {
      if (arg === null) {
        this.pager = this.$options.data().pager;
      }
      window._this = this;
      let th = this;
      th.showLoading();
      let j = Object.assign({}, this.form, th.pager);
      th.$api
        .getReturnedMedicineList(j)
        .then((res) => {
          if (res.executed) {
            th.tabList = res.dataBody.list;
            th.pager.total = res.dataBody.total;
            th.showLoading(false);
          } else {
            th.$message.error(res.message);
            th.showLoading(false);
          }
        })
        .catch((error) => {
          th.showLoading(false);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  .table-box {
    min-width: 600px;
    font-size: 12px;
  }
}
.chart_box {
  display: inline-block;
  width: 100%;
  height: 400px;
}
</style>
